import React, { useState, useEffect } from 'react';
import { BorrowCountStyled } from './style';
import icBorrowCount from '@/assets/images/ic-borrow-count.png';
import MyRing from '../myRing';
import { toThousands } from '@/utils/tools/common';
import CountTitle from '../countTitle';
import { CommonArrType } from '@/services/types';

type BorrowCountPropsType = {
  data: CommonArrType[] ;
};

const BorrowCount: React.FC<BorrowCountPropsType> = (props) => {
  const [curData, setCurData] = useState<CommonArrType[]>([]);
  const [percent, setPercent] = useState<number>(0);
  useEffect(() => {
    if (props.data) {
      setCurData(props.data);
      let num1 = props.data[0]?.number;
      let num2 = props.data[1]?.number;
      let percent = (num2 / (num1 + num2)) * 100;
      setPercent(Math.round(percent));
    }
  }, [props.data]);
  return (
    <BorrowCountStyled>
      <CountTitle title='累计借阅人次' />
      <div className='borrow-count'>
        <img src={icBorrowCount} alt='' />
        <div className='count-container'>
          <div className='left-title'>
            <div className='count-number'>{toThousands(curData[0]?.number)}</div>
            <div className='count-name'>{curData[0]?.name}</div>
          </div>
          <div className='middle-chart'>
            <MyRing maxPercent={percent} />
            <div className='middle-title'>借阅统计</div>
          </div>
          <div className='right-title'>
            <div className='count-number'>{toThousands(curData[1]?.number)}</div>
            <div className='count-name'>{curData[1]?.name}</div>
          </div>
        </div>
      </div>
    </BorrowCountStyled>
  );
};

export default BorrowCount;
